<template>
	<div class="navbar">
		<div class="left"><slot name="left"></slot></div>
		<div class="center"><slot name="center"></slot></div>
		<div class="right"><slot name="right"></slot></div>
	</div>
</template>

<script>
	export default {
		name: 'NavBar'
	}
</script>

<style scoped>
	.navbar{
		display: flex;
		height: 44px;
		line-height: 44px;
		flex: 1;
		position: absolute;
		/* background: var(--color-tint); */
		color: #fff;
		left: 0;
		right: 0;
		margin-top: 0;
		text-align: center;
		width: 100%;
		z-index: 9;
	}
	
	.left,.right{
		width: 60px;
	}
	
	.center{
		width: 100%;
	}
</style>
